
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">告警信息</span>
        </div>
        <div class="header-right-wraper" style="margin-top: 10px">
          <RadioGroup v-model="valueData" @on-change="selectByTime">
            <Radio label="0">
              <span>全部</span>
            </Radio>
            <Radio label="1">
              <span>最近一月</span>
            </Radio>
            <Radio label="2">
              <span>最近一周</span>
            </Radio>
          </RadioGroup>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div class="tipName">
          <div>
            <!-- <Tag color="error"
              ><i class="fa fa-exclamation-triangle"></i
              >&nbsp;&nbsp;&nbsp;严重&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="warning"
              ><i class="fa fa-star"></i
              >&nbsp;&nbsp;&nbsp;主要&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="magenta"
              ><i class="fa fa-star-half"></i
              >&nbsp;&nbsp;&nbsp;次要&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="#aa9df9"
              ><i class="fa fa-bell"></i
              >&nbsp;&nbsp;&nbsp;预警&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="blue"
              ><i class="fa fa-question"></i
              >&nbsp;&nbsp;&nbsp;未知&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="geekblue"
              ><i class="fa fa-check-square-o"></i
              >&nbsp;&nbsp;&nbsp;未确认&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="purple"
              ><i class="fa fa-file-audio-o"></i
              >&nbsp;&nbsp;&nbsp;未通知&nbsp;&nbsp;&nbsp;12</Tag
            >
            <Tag color="#19be6b"
              ><i class="fa fa-power-off"></i
              >&nbsp;&nbsp;&nbsp;已关闭&nbsp;&nbsp;&nbsp;12</Tag
            > -->
          </div>

          <div>
            <!-- <Button
              type="primary"
              @click="addMapUrl"
              class="system-btn-style headerMar"
            >
              <Icon type="ios-cloud-download-outline" />&nbsp;导出
            </Button> -->
            <Button
              type="primary"
              @click="delMapUrl"
              class="system-btn-style headerMar"
            >
              <Icon type="ios-close" />&nbsp;删除
            </Button>
          </div>
        </div>
        <div style="height: calc(100% - 95px)">
          <TableList
            ref="table"
            :getColumn="getColumns"
            :getAxios="getAxios"
            selection
            @selectionChange="selectionChange"
          >
            <template v-slot:show_details="item">
              <CButton
                title="查看"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="LookMapUrl(item.data.row)"
                >查看</CButton
              >
            </template>
            <template v-slot:messageType="item">
              <!-- {{ (item.data.row.messageType = 0 ? "个人" : "角色") }} -->
              <div
                v-if="item.data.row.messageType == '0'"
       
              >
                硬盘
              </div>
              <div
                v-if="item.data.row.messageType == '1'"
                
              >
                内存
              </div>
              <div
                v-if="item.data.row.messageType == '2'"
             
              >
                CPU
              </div>
                 <div
                v-if="item.data.row.messageType == '3'"
             
              >
                网络
              </div>
            </template>
            <template v-slot:deliveryWebStatus="item">
              <div
                v-if="item.data.row.deliveryWebStatus == '0'"
                style="color: blue"
              >
                不需要投递
              </div>
              <div
                v-else-if="item.data.row.deliveryWebStatus == '1'"
                style="color: red"
              >
                未读
              </div>
              <div v-else style="color: green">已读</div>
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>

    <!--删除任务-->
    <Modal v-model="delShow" draggable scrollable title="删除任务">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该任务信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--查看任务-->
    <Modal v-model="checkTask" draggable scrollable>
      <p slot="header" class="modalHeader">
        <span style="margin-left: 5px">查看详情</span>
      </p>
      <div style="margin: 10px 0 0 10px">
        <!-- <div class="delKuangBody">ip：{{ lookDataList.nodeIp }}</div> -->
        <div class="delKuangBody">来源：{{ lookDataList.messageFrom }}</div>
        <div class="delKuangBody">主机名：{{ lookDataList.nodeName }}</div>
        <div class="delKuangBody">告警时间：{{ lookDataList.messageTime }}</div>
        <div class="delKuangBody">
          告警正文：{{ lookDataList.messageContent }}
        </div>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="checkTaskEnsure" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--新建任务-->
    <!-- <Modal v-model="checkTask" draggable scrollable>
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/search.png" alt />
        <span style="margin-left: 5px">查看任务</span>
      </p>
      <div class="delKuangBody"></div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal> -->
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "alarmManagement",
  components: { TableList },
  data() {
    return {
      valueData:"0",
      lookDataList: {},
      delShow: false,
      delData: [],
      checkTask: false,
      getColumns: [
        {
          title: "告警正文",
          key: "messageContent",
          className: "messageContent",
          align: "center",
        },
        {
          title: "告警时间",
          key: "messageTime",
          sortable: true,
          className: "messageTime",
          width: "220",
          align: "center",
        },
        {
          title: "主机名",
          key: "nodeName",
          className: "nodeName",
          width: "150",
          align: "center",
        },
        // {
        //   title: "ip地址",
        //   key: "nodeIp",
        //   className: "nodeIp",
        //   align: "center",
        //   width: "230",
        // },
        {
          title: "来源",
          key: "messageFrom",
          className: "messageFrom",
          width: "150",
          align: "center",
        },
        {
          title: "类别",
          key: "messageType",
          className: "messageType",
          width: "150",
          slot: "messageType",
          filters: [
            {
              label: "硬盘",
              value: 0,
            },
            {
              label: "内存",
              value: 1,
            },

            {
              label: "CPU",
              value: 2,
            },
             {
              label: "网络",
              value: 3,
            },
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.messageType == 0;
            } else if (value == 1) {
              return row.messageType == 1;
            } else if (value == 2) {
              return row.messageType == 2;
            }
            else if (value == 3) {
              return row.messageType == 3;
            }
          },
          align: "center",
        },
        {
          title: "状态",
          key: "deliveryWebStatus",
          className: "deliveryWebStatus",
          slot: "deliveryWebStatus",
          width: "150",
          align: "center",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          align: "center",
          width: "180",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.listByUserOrRole, //请求路径
        method: "get", //请求方式
        // dataList: { messageToRole: 129 }, //请求参数
        dataList: { messageToUser:this.$store.state.user.userId,
        messageToRole:this.$store.state.user.roleInfo[0].id }, //请求参数userId
      },
    };
  },
  mounted() {
    this.getImageControlTree();
  },
  methods: {
    checkTaskEnsure(){
         let param = {
           id:this.lookDataList.id,
           status:2
         }
         let path = this.$api.monitorApi.updateDeliveryWebStatusById + this.lookDataList.id +'/'+"2"
         this.http.put(path,param).then(ele=>{
            if(ele.data.code!=0){
              this.$Message.error('异常')
            }
         })
        this.checkTask=false
        let dataList= {
          messageToUser:this.$store.state.user.userId,
          messageToRole:this.$store.state.user.roleInfo[0].id,
          currentPageNum: true
         }
        this.$refs.table.getRefreshTable(dataList);
    },
    selectByTime(value) {
      let messageTimeTo = new Date();
      let aa = this.$moment(messageTimeTo).format("YYYY-MM-DD HH:mm:ss");
      let messageTimeFrom = "";
      if (value == 0) {
      }
      if (value == 1) {
        messageTimeFrom = this.$moment(messageTimeTo)
          .subtract(1, "months")
          .format("YYYY-MM-DD 00:00:00");
      }
      if (value == 2) {
        messageTimeFrom = this.$moment(messageTimeTo)
          .subtract(7, "days")
          .format("YYYY-MM-DD 00:00:00");
      }
      let path = this.$api.monitorApi.selectByCondition
      let param = {
        messageToUser:this.$store.state.user.userId,
        // messageToUser:129,
        messageTimeFrom:messageTimeFrom,
        messageTimeTo:aa,
        // messageToRole:129,
        messageToRole:this.$store.state.user.roleInfo[0].id,
        currentPageNum: true
      }
         let getAxiosData = {
        method: "post",
        url: path,
        dataList: { param},
        //  query: {
        //   pageNum: this.pageNum,
        //   // from: "taskLook",
        //   // taskType: val.taskType,
        // },
       
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },
    delMapUrl() {
      this.delShow = true;
      //     let path = this.$api.monitorApi.deleteByIds
      // this.http.post(path,this.delData).then(ele=>{
      //     console.log(ele,'elelelelelel')
      //     if(ele.data.success){

      //     }
      // })
    },
    filterMethod(value, row) {
      console.log(value, row, "value,row");
    },
    LookMapUrl(row) {
      console.log(row, "rowrow");
      this.lookDataList = row;
      this.checkTask = true;
    },
    //任务 删除
    delOk() {
      let that = this;
      let path = this.$api.monitorApi.deleteByIds;
      this.http
        .post(path, this.delData)
        .then((item) => {
          if (item.status === 200) {
            that.delShow = false;
            that.$Message.success("删除成功!");
            that.$refs.table.getRefreshTable({
              messageToUser:this.$store.state.user.userId,
              messageToRole:this.$store.state.user.roleInfo[0].id,
              currentPageNum: true
            });
          } else {
            that.$Message.error("删除失败！");
          }
        })
        .catch(() => {
          that.$Message.error("删除失败，请联系管理员！");
        });
    },
    selectionChange(data) {
      // 选中的数据
      this.delData = [];
      console.log(data, "00000");
      data.forEach((ele) => {
        this.delData.push(ele.id);
      });
      console.log(this.delData, "delData");
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}
.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
.rightCard .card-body {
  margin-top: 10px;
}
</style>


<style scoped>
.ivu-tag {
  height: 33px;
  line-height: 33px;
}
.tipName {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
